import React, {Component} from 'react';
import {CSSTransition} from "react-transition-group";
import "./Animation.css"
import Fetch from "../../ReactReaux/Fetch/Fetch";
class Animation extends Component {
    constructor(props) {
        super(props);
        this.state={
            isFade:true
        }
    }
    render() {
        return (
            <div>
                <h1>这里是动画</h1>
                <button onClick={this.changeFade.bind(this)}> 点击</button>
                <hr/>
                <CSSTransition in={this.state.isFade}
                timeout={1000}
                classNames={"fade"}
                  onEntered={(el)=>{
                      console.log("进入动画完毕")
                      el.style.backgroundColor="red"
                  }}
                  onExited={(el)=>{
                      console.log("离开动画",el)
                }}
                >
                {/*想做动画的标签*/}
                <div className={"box"}></div>
                </CSSTransition>

            </div>
        );
    }
    componentDidMount() {
        Fetch.get("https://elm.cangdu.org/shopping/v1/restaurants/activity_attributes").then(data=>{
            console.log(data)
        })
    }

    changeFade(){
        this.setState((state,props)=>{
            return {
                isFade:!state.isFade
            }
        },()=>{

        })
    }
}
export default Animation;
/*
React提供了动画插件,react-transition-group
通过CSSTransition组件,将需要做动画的组件包裹起来,我们也要通过一个变量控制组件的进入和离开
CSSTransition组件的属性配置:
in:接收控制动画的变量
timeout:由CSSTransition主导的动画(不要小于实际CSS样式动画的时间),动画结束才会执行相应的回调函数
classNames:自定义的类名(将来在css中使用)
onEntered:进入的回调函数
onExited:离开的回调函数
* */